<template>
  <div id="app">
    <router-view/>
    <ul class="tobar">
      <li v-for="(item,index) in iconInfo"  @click="click(index)" :key='item.id' class="icon_out">
        <router-link :to="item.link" exact  >
          <img class="img" :src="item.imgUrl" alt=""><br>
          {{item.msg}}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
        iconInfo:[
          {
            link:'/',
            imgUrl:'./static/img/icon1.png',
            msg:'首页'
          },
          {
            link:'/product',
            imgUrl:'./static/img/icon2.png',
            msg:'借款产品'
          },
          {
            link:'/mine',
            imgUrl:'./static/img/icon3.png',
            msg:'我的'
          }
        ]
    }
  },
  methods:{
    click:function(num) {
      // console.log(num);
      // const Oli = document.querySelectorAll('.icon_out');
      // Oli.forEach(function(item,index) {
      //   if(index==num){
      //     Oli[index].style.backgroundColor = '#ccc';
      //   }else{
      //     Oli[index].style.backgroundColor = 'white'
      //   }
      // })
    }
  },
  mounted(){
    let Oapp = document.getElementById("app");
    Oapp.style.height=window.screen.height+"px";

  }
}
</script>
<style src="./assets/reset.css"></style>
<style src="./assets/style.css"></style>
